<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        backgroundColor: '#273454',
        color: ['#51e5ff', '#f0932b', '#EC368D', '#FFA5A5', '#FFD6C0','#EEB422',"#00BFFF","#66CDAA","#FFD700","#CD853F","#9400D3","#FFC0CB"],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}$ ({d}%)",
            textStyle: {
                fontSize: 16,
            },
        },
        legend: {
            data: [],
            orient: 'vertical',
            right: '15%',
            top: '25%',
            itemWidth: 20,
            itemHeight: 20,
            itemGap: 30,
            textStyle: {
                color: '#',
                fontSize: 16,
            },
        },
        series: [{
            name: 'TITLE',
            type: 'pie',
            clockwise: false,
            startAngle: 90,
            radius: '75%',
            center: ['44%', '50%'],
            hoverAnimation: false,
            roseType: 'radius',
            data: [],
            itemStyle: {
                normal:{
                    borderColor:'#273454',
                    borderWidth:'5',
                },
            },
            label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}：{d}%}\n{hr|}',
                rich: {
                    hr: {
                        backgroundColor: 't',
                        borderRadius: 100,
                        width: 0,
                        height: 10,
                        padding: [3, 3, 0, -16],
                        shadowColor: '#1c1b3a',
                        shadowBlur: 1,
                        shadowOffsetX: '0',
                        shadowOffsetY: '2',
                    },
                    a: {
                        padding: [-35, 15, -20, 5],
                        fontSize:18
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1,
                    }
                }
            }
        }],
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/pie/one',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                option.series[0].data = result.data.series[0].data;
                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }else if(option.legend){
                    let legend = [];
                    result.data.series[0].data.forEach(function (item,index) {
                        legend.push(item.name);
                    });
                    option.legend.data = legend;
                }
                if (result.data.title && option.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
